<template>
  <view>
    <u-popup :show="show" mode="center" :customStyle="{width: '500rpx', padding: '30rpx'}" round="20rpx" :safeAreaInsetBottom="false"
             @touchmove.stop.prevent="moveHandle">
      <view class="content">
        <view class="title">示例图片</view>
        <view class="desc">
          <text>资质图片需要</text>
          <text>清晰可见</text>
        </view>

        <view class="demo-box">
          <view class="u-flex-content-center">
            <u-album :urls="demoUrlList"></u-album>
          </view>
          <view class="u-flex-content-center u-m-t-10">
            <view class="close-box">
              <u-icon name="checkmark" color="#fff" size="10"/>
            </view>
            <text class="u-m-l-10">正确示例</text>
          </view>
        </view>

        <view class="tips u-m-t-50">tips：上传虚假照片将无法通过审核</view>

        <view class="u-m-t-20 u-flex u-row-between">
          <u-button text="取消" :customStyle="{width: '45%', height: '88rpx', borderRadius: '44rpx'}" @click="confirm()"/>
          <u-button type="primary" text="上传" :customStyle="{width: '45%', height: '88rpx', borderRadius: '44rpx', color: '#fff'}"
                    @click="upload()"/>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: "store-info",
  data() {
    return {
      demoUrlList: [""],
      nextStepBtnCustomStyle: {
        width: '488rpx',
        height: '88rpx',
        borderRadius: '44rpx',
        color: '#fff',
      },
      show: false,
      // 图片demo
      uploadDemoObj: {
        'shopPhoto': this.$configPath.imgURL + 'fixed/shopPhotoDemo.jpg',
        'shopEntrancePhoto': this.$configPath.imgURL + 'fixed/shopEntrancePhotoDemo.jpg',
        'checkStandPhoto': this.$configPath.imgURL + 'fixed/checkStandPhotoDemo.jpg',
        'handHoldIdCard': this.$configPath.imgURL + 'fixed/handHoldIdCardDemo.jpg',
      },
      // 当前查看的示例类型
      photoType: '',
    };
  },
  created() {

  },
  methods:{
    showPopup(inPhotoType){
      this.photoType = inPhotoType
      this.demoUrlList.splice(0, 1, this.uploadDemoObj[inPhotoType]);
      this.show = true;
    },

    unShowPopup(){
      this.show = false;
    },

    // 确认无误
    confirm(){
      this.unShowPopup();
    },

    // 重新上传
    upload(){
      this.unShowPopup();
      this.$parent.upload(this.photoType);
    },
    // 防止遮罩层滚动穿透
    moveHandle(){},
  }
}
</script>

<style lang="scss" scoped>
.content{
  width: 100%;
  font-size: $f-base;

  .tips{
    color: rgba(0, 0, 0, 0.8);
    font-size: $f-sm;
    text-align: center;
    font-weight: bold;
  }

  .demo-box{
    margin-top: 30rpx;
    text-align: center;

    .close-box{
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      background-color: rgb(0, 191, 127);
      display: flex;
      justify-content: center;
      align-items: center;

      .fail-img{
        margin: 0 auto;
      }

    }
  }

  .desc{
    margin-top: 50rpx;
    text-align: center;
    text:nth-of-type(1){
      color: rgba(0, 0, 0, 0.8);
    }
    text:nth-of-type(2){
      color: red;
    }
  }

  .title{
    font-weight: bold;
    text-align: center;
  }
}
</style>
